<template>
  <div class="invite-activity-box">
    <div class="invite-activity">
      <div class="text">邀请好友注册后即得现金{{invitation.invitationFee | formatMoney}}元</div>
      <div class="qrcode-box">
        <p class="qrcode" id="qrcode"></p>
        <p class="tips">长按二维码，立即注册</p>
      </div>
    </div>
    <div class="record" @click="goRecord" v-show="showRecord">
      查看邀请记录
      <i class="iconfont icon-wode-erjizhe"></i>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { uuid } from '@/utils/tool'
import { mapGetters } from 'vuex'
import wechatService from 'SERVICE/wechatService'
export default {
  data() {
    return {
      invitation: {},
      friendShareData: '',
      timelineShareData: '',
      shareUuid: '',
      showRecord: false
    }
  },
  created() {
    this.shareUuid = uuid()
    this.setShare()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    getInvitationUrl() {
      wechatService
        .getInvitationUrl({
          agentId: this.userInfo.agentId,
          enterpriseId: localStorage.getItem('enterpriseId'),
          uuid: localStorage.getItem('uuid')
        })
        .then(res => {
          // 活动结束跳转普通邀请页面
          if (res.invitationFee == 0) {
            this.$router.replace('/wx/invite/friends')
          } else {
            this.invitation = res
            this.showRecord = res.invitation
            let url = res.invitationUrl
            if (!res.ifRedPacket) {
              url = url.replace('register?', 'register2?')
            }
            this.getQrcode(url)
          }
        })
        .catch()
    },
    getQrcode(url) {
      let qrcode = new QRCode('qrcode', {
        width: 260,
        height: 260, // 高度
        text: url, // 二维码内容
        image: '',
        render: 'table' // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas） // background: '#f0f' // foreground: '#ff0'
      })
    },
    goRecord() {
      this.$router.push('/wx/record')
    },
    // 设置分享
    async setShare() {
      let host = process.env.VUE_APP_APP_URL
      let uuid = localStorage.getItem('uuid')
      let appid = localStorage.getItem('appid')
      host = `${host}#/wx/invite/${this.invitation.ifRedPacket ? 'register':'register2'}?parentUserId=${this.userInfo.agentId}&enterpriseId=${this.userInfo.enterpriseId}&shareUuid=${this.shareUuid}&uuid=${uuid}&appid=${appid}`
      this.timelineShareData = this.friendShareData = {
        title: '注册就送你现金红包，先到先得，猛戳我领取！',
        desc: 'AW大师公众号',
        imgUrl: 'https://720ljq2test-10037467.file.myqcloud.com/header/qrcode/6b07b87ac760401e9e12bebafedc3df9.png',
        link: host,
        success: this.articleShare,
        cancel: this.articleShare
      }
      window.awHelper.wechatHelper.setShare(this.friendShareData, this.timelineShareData)
    },
    // 分享成功之后
    articleShare() {
      setTimeout(() => {
        this.shareUuid = uuid()
      }, 500)
    }
  },
  filters: {
    formatMoney(val) {
      if (val) {
        return (val / 100).toFixed(2)
      }
      return '0.00'
    }
  },
  mounted() {
    if (!this.userInfo.selfSupport) {
      this.$router.replace('./friends')
    } else {
      this.getInvitationUrl()
    }
  }
}
</script>

<style lang="less" scoped>
.invite-activity-box {
  font-size: 14px;
  color: #40516f;
  background-color: #e2273f;
  .invite-activity {
    background: #e2273f url('../../../assets/img/wx/invite.png') no-repeat left top;
    background-size: 100% auto;
    padding-bottom: 50px;
    .text {
      padding-top: 147px;
      text-align: center;
      line-height: 20px;
      color: #fff794;
    }
    .qrcode-box {
      padding-top: 178px;
      margin: 0 28px;
      text-align: center;
      .qrcode {
        width: 270px;
        height: 270px;
        margin: 0 auto;
        /deep/ img {
          width: 100%;
          height: 100%;
        }
      }
      .tips {
        color: #40516f;
        margin-top: 15px;
        text-align: center;
      }
    }
  }
  .record {
    text-align: center;
    color: #fff87d;
    margin: 15px auto 50px;
  }
}
</style>